<template>
  <view>
    <view
      class="navbarPotion"
      :style="{ transform: `translateY(${hidefoucs ? keyboardHeight : ''})` }"
    >
      <!-- <view class="navbarPotion"> -->
      <view class="navbar" id="navbar">
        <!---->
        <u-navbar @leftClick="rightClick" :autoBack="true">
          <view class="" slot="center">
            <view class="" style="width: 300rpx" v-if="showInput">
              <u--input
                :placeholder="placeholder.name"
                border="none"
                clearable
                @confirm="submitInput"
                focus
                v-model="value"
                @blur="submitInput"
              ></u--input>
            </view>
            <view
              v-else
              @click="() => (showInput = true)"
              style="display: flex; font-size: 36rpx; font-weight: 700"
            >
              {{ placeholder.name }}
              <view style="width: 6rpx"></view>
              <u-icon
                name="edit-pen-fill"
                color="#9e9e9e"
                top="3"
                space="5"
                size="18"
                style="margin-bottom: 6rpx"
              ></u-icon>
            </view>
          </view>
        </u-navbar>
        <view class="barcenter" style="">
          <view class="navbar-left" v-if="!isTurn">
            <view class="subtitle">与 Min 的 {{ chatList.length }} 条对话</view>
            <view class="picker" @click="showPicEve">
              {{ columns[0][showpicIndex] }}
              <u-icon
                name="arrow-right"
                style="margin-left: 6rpx"
                color="rgba(196, 196, 196, 1)"
              ></u-icon>
            </view>
            <view style="position: relative" @tap="penEvent">
              <view style="position: absolute; left: -30rpx; top: -24rpx">
                <u-line length="80rpx" direction="col" color="rgba(235, 235, 235, 1)"></u-line>
              </view>
              <u-icon name="share-square" color="rgba(158, 158, 158, 1) " size="18"></u-icon>
            </view>
          </view>
          <view class="navbar-left" style="height: 80rpx" v-else>
            <u-checkbox-group @change="Allchange">
              <u-checkbox name="true" :checked="checkoutAll"></u-checkbox>
              全选
            </u-checkbox-group>
          </view>
        </view>
      </view>
      <view class="placeholder"></view>
      <u-modal
        :show="showLogoutModel"
        @cancel="showLogoutModel = false"
        @confirm="onLogoutConfirm"
        title="退出登录"
        showCancelButton
      >
        <view class="slot-content" style="text-align: center">
          <text>一定要跟老迈Say Goodbye吗？</text>
        </view>
      </u-modal>
      <u-picker
        :show="showpic"
        @cancel="() => (showpic = false)"
        :defaultIndex="[1]"
        :columns="columns"
        @confirm="getPicVal"
      ></u-picker>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
const tempArr = [-2, 10, 50, 100, -1]

export default {
  options: {
    styleIsolation: 'shared',
  },
  data() {
    return {
      showModal: false,
      showLogoutModel: false,
      title: '',
      showpic: false,
      showpicIndex: 1,
      isFixd: false,
      showInput: false,
      value: '',
      isTurn: false,
      columns: [
        ['禁止关联上下文', '关联10条上下文', '关联50条上下文', '关联100条上下文', '关联全部上下文'],
      ],
    }
  },
  computed: {
    chatList() {
      return this.$store.state.chatAI.chatListAI.filter((item) => item.role !== 'system')
    },
    activeChat() {
      return this.$store.getters.activeChat
    },
    setting() {
      return this.$store.state.chatAI.settingUserInfo
    },
    checkoutAll() {
      return this.$store.state.share.checkoutAll
    },
    hidefoucs() {
      return this.$store.state.chatAI.hidefoucs
    },
    keyboardHeight() {
      return this.$store.state.chatAI.keyboardHeight
    },
    ...mapState({
      placeholder: (state) => state.chatAI.nowItem,
      vuexShare: (state) => state.chatAI.share,
    }),
  },
  created() {
    this.showpicIndex = parseInt(uni.getStorageSync('pickerId') || '1')
    setTimeout(async () => {
      if (!this.setting.chat_context) {
        const res = await this.$store.dispatch('IuserSettingInfo')
        this.showpicIndex = tempArr.findIndex((item) => {
          return item === res.chat_context
        })
      } else {
        this.showpicIndex = tempArr.findIndex((item) => {
          return item === this.setting.chat_context
        })
      }
    }, 2000)
  },
  watch: {
    activeChat: {
      handler(val) {
        if (val) {
          this.title = val.title
        }
      },
      immediate: true,
    },

    vuexShare: {
      handler(val) {
        this.isTurn = val
      },
    },
  },
  methods: {
    onConfirm() {
      this.$store.commit('updateHistoryItem', {
        ...this.activeChat,
        title: this.title,
      })
      this.showModal = false
    },
    onLogoutConfirm() {
      this.showLogoutModel = false
      this.$store.commit('logout')
      uni.reLaunch({
        url: '/pages/login/login',
      })
    },
    showPicEve() {
      this.showpic = true
    },
    async getPicVal(val) {
      this.showpicIndex = val.indexs[0]
      this.showpic = false
      console.log(val)
      // 这里还需要存在本地读取
      try {
        // -2)不带上下文 -1)带上所有上下文 >0)关联聊天上下文的条数
        await this.$store.dispatch('IuserSettingInfoUpdate', {
          chat_context: tempArr[val.indexs[0]],
        })
        uni.setStorageSync('pickerId', JSON.stringify(this.showpicIndex))
        this.$store.dispatch('IuserSettingInfo')
      } catch (error) {
        console.log(error)
        uni.showToast({
          title: error.message,
          icon: 'none',
        })
      }
    },
    rightClick() {
      console.log('来啦')
      this.$store.commit('SETSHARE', false)
      this.$store.commit('setShowHistory', true)
      // uni.navigateBack()
    },
    async submitInput() {
      console.log('触发', this.value)
      if (!this.value) {
        this.showInput = false
        return
      }
      // 这里发送请求修改名字
      await this.$store.dispatch('IconversationUpdate', {
        id: this.placeholder.id,
        name: this.value,
      })
      this.$store.commit('SETNAME', this.value)
      this.$store.commit('SETSHARENAMENAME', this.value)
      this.showInput = false
    },
    // change(e) {
    //   this.value = e
    //   console.log(e)
    // },
    penEvent() {
      // return
      this.isTurn = true
      this.$store.commit('SETSHARE', this.isTurn)
    },
    Allchange(e) {
      let tempflag = false
      if (e.length) {
        tempflag = true
      } else {
        tempflag = false
      }
      this.$store.commit('SETALL', tempflag)
    },
  },
}
</script>

<style scoped lang="scss">
.placeholder {
  width: 750rpx;
  height: calc(128rpx + var(--status-bar-height) + 28rpx);
}
.navbarPotion {
  position: fixed;
  top: 0;
  left: 0;
  position: relative;
  transition-property: all;
  transition-duration: 0.2s;
  z-index: 9;
  background-color: rgba(245, 245, 245, 1);
  ::v-deep .u-navbar--fixed {
    position: absolute !important;
  }
}
.navbar {
  width: 750rpx;
  height: calc(128rpx + var(--status-bar-height) + 28rpx);
  padding: 28rpx 24rpx;
  padding-top: calc(28rpx + var(--status-bar-height));
  display: flex;
  justify-content: space-between;
  // box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.1);
  box-sizing: border-box;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;

  // background: #fff;
  .barcenter {
    width: 100%;
    height: 80rpx;
    background-color: #fff;
    border-radius: 20rpx;
    margin-top: calc(40rpx + var(--status-bar-height));
  }

  .navbar-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20rpx;
    font-size: 28rpx;

    .title {
      line-height: 80rpx;
      font-size: 28rpx;
      font-weight: 700;
    }

    .picker {
      flex: 1;
      text-align: center;
      line-height: 80rpx;
      display: flex;
      font-size: 24rpx;
      // justify-content: right;
      justify-content: flex-end;
      margin-right: 50rpx;
    }

    .subtitle {
      font-size: 28rpx;
      color: rgb(48, 48, 48);
    }
  }

  .navbar-right {
    width: 50%;
    flex-shrink: 0;
    margin-left: 20rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20rpx;

    .icon-box {
      width: 100rpx;
      height: 100rpx;
      /* #ifdef MP-WEIXIN */
      width: 80rpx;
      height: 80rpx;
      /* #endif */
      box-shadow: 0 0 0 2rpx #dedede;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20rpx;

      .icon {
        width: 32rpx;
        height: 32rpx;
        filter: invert(0.5);
      }
    }
  }
}

.slot-content {
  width: 100%;
}
.u-navbar__content {
  ::v-deep .u-icon {
    margin-bottom: 18rpx !important;
    // margin-top: 10rpx !important;
  }
}
</style>
